<template>
  <div style="padding-bottom: 10px">
    <!-- <van-search
      shape="round"
      placeholder="请输入手机号码或姓名"
      readonly
      @click="router.push('/search')"
    /> -->
    <div class="container pt-4">
      <van-form @submit="onSubmit" ref="formInstance">
        <van-cell-group inset>
          <van-field
            v-model="form.policeName"
            name="policeName"
            label="姓名"
            required
            placeholder="请填写姓名"
            :rules="[{ required: true, message: '请填写姓名' }]"
          />
          <!-- <van-field
            v-model="form.mobile"
            name="mobile"
            label="手机号"
            required
            placeholder="请输入手机号"
            type="number"
            :rules="[{ required: true, message: '请输入手机号' }]"
          /> -->
          <van-field
            v-model="form.sex"
            name="sex"
            label="性别"
            required
            placeholder="请选择性别"
            readonly
            @click="onClick('sex')"
            :rules="[{ required: true, message: '请选择性别' }]"
          >
          </van-field>
          <!-- <van-field
            v-model="form.birthDay"
            name="birthDay"
            label="出生年月"
            readonly
            required
            placeholder="请选择出生年月"
            @click="onClick('birthDay')"
            :rules="[{ required: false, message: '请选择出生年月' }]"
          /> -->
          <van-field
            v-model="form.birthDay"
            name="birthDay"
            label="出生年月"
            readonly
            placeholder="请选择出生年月"
            @click="onClick('birthDay')"
            :rules="[{ required: false, message: '请选择出生年月' }]"
          />
          <van-field
            v-model="form.ethnicGroup"
            name="ethnicGroup"
            label="民族"
            required
            placeholder="请选择民族"
            @click="onClick('ethnicGroup')"
            readonly
            :rules="[{ required: true, message: '请选择民族' }]"
          />
          <van-field
            v-model="form.nation"
            name="nation"
            label="籍贯"
            required
            placeholder="请输入籍贯"
            :rules="[{ required: true, message: '请输入籍贯' }]"
          />
          <van-field
            v-model="form.joinPoliceTime"
            name="joinPoliceTime"
            label="入警时间	"
            readonly
            required
            placeholder="请选择入警时间	"
            @click="onClick('joinPoliceTime')"
            :rules="[{ required: true, message: '请选择入警时间' }]"
          />
          <van-field
            v-model="form.politicalStatus"
            name="politicalStatus"
            label="政治面貌"
            placeholder="请选择政治面貌"
            required
            @click="onClick('politicalStatus')"
            readonly
            :rules="[{ required: true, message: '请选择政治面貌' }]"
          />
          
          <!-- <van-field
            v-model="form.joinNationTime"
            name="joinNationTime"
            label="入党时间"
            readonly
            required
            placeholder="请选择入党时间"
            @click="onClick('joinNationTime')"
            :rules="[{ required: true, message: '请选择入党时间' }]"
          /> -->
          <van-field
            v-model="form.joinNationTime"
            name="joinNationTime"
            label="入党时间"
            readonly
            placeholder="请选择入党时间"
            @click="onClick('joinNationTime')"
          />
          <van-field
            v-model="form.zoneId"
            name="zoneId"
            label="所属单位"
            required
            readonly
            placeholder="请选择所属单位"
            @click="onClick('zoneId')"
            :rules="[{ required: true, message: '请选择所属单位' }]"
          />
          <van-field
            v-model="form.department"
            name="department"
            label="所属科室"
            required
            readonly
            placeholder="请选择所属科室"
            @click="onClick('department')"
            :rules="[{ required: true, message: '请输入所属科室' }]"
          />
          <van-field
            v-model="form.idPhoto"
            name="idPhoto"
            label="证件照"
            required
            placeholder="请上传证件照"
            readonly
            :rules="[{ required: true, message: '请上传证件照' }]"
          >
            <template #input>
              <van-uploader
                :before-read="useCompressor"
                :max-count="1"
                multiple
                v-model="fileList"
              /> </template
          ></van-field>
        </van-cell-group>
        <div style="margin: 16px">
          <van-button round block type="primary" native-type="submit">
            下一步
          </van-button>
        </div>
      </van-form>
      <van-popup round v-model:show="showPicker" position="bottom">
        <van-picker
          v-if="
            !['joinNationTime', 'joinPoliceTime', 'birthDay'].includes(
              columnsType
            )
          "
          :columns="columnsValue.get(columnsType)"
          @confirm="onConfirm"
          @cancel="showPicker = false"
        />
        <van-date-picker
          v-else
          :minDate="new Date(1924, 0, 1)"
          v-model="currentDate"
          title="选择年月"
          :columns-type="['year', 'month']"
          @confirm="handleConfirm"
          @cancel="showPicker = false"
        />
      </van-popup>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useCompressor } from "@/utils";
import { useUserInfo } from "@/store";
// import type { PickerConfirmEventParams } from "vant";
import { showToast, type PickerConfirmEventParams} from 'vant'
import { getAreaList } from "@/api";
import router from "@/router";

const sexOption = [
  {
    value: "男",
    text: "男",
  },
  {
    value: "女",
    text: "女",
  },
];
const store = useUserInfo();
const fileList = ref([]);
// 定义从接口获取的科室
const ksDataList = ref();
const form = reactive<Record<string, any>>({}),
  showPicker = ref(false),
  formInstance = ref(null),
  currentDate = ref(["1980", "01"]);
const columnsType = ref("");

getAreaList().then((res) => {
  console.log(Object.values(res), 'res')
  let list = Object.values(res)
  let data = []
  for (let i = 0; i < list.length; i ++) {
    console.log(list[i].name)
    let val = list[i].dataList;
    for (let y = 0; y < val.length; y++) {
      val[y].text = val[y].label;
    }
    data.push({
      text: list[i].name,
      value: list[i].name,
      id: list[i].name,
      dataList: val
    })
  }
  console.log(data, 'data')
  store.setOptions(data)
  columnsValue.set("zoneId", data);
  ksDataList.value = data
  // const data = res.map(({ label, value }) => ({
  //   text: label,
  //   value: label,
  //   id: value,
  // }));
  // console.log(data, 'data')
  // store.setOptions(data)
  // columnsValue.set("zoneId", data);
}) 
  
  

const columnsValue = new Map([
  ["sex", sexOption],
  [
    "ethnicGroup",
    [
      {
        value: "汉族",
        text: "汉族",
      },
      {
        value: "少数民族",
        text: "少数民族",
      },
    ],
  ],
  [
    "politicalStatus",
    [
      {
        value: "党员",
        text: "党员",
      },
      {
        value: "预备党员",
        text: "预备党员",
      },
      {
        value: "团员",
        text: "团员",
      },
      {
        value: "群众",
        text: "群众",
      },
    ],
  ],
  ["provinces", store.provinces.map((item) => ({ text: item, value: item }))],
]);
const onSubmit = () => {
    try {
      console.log(form,'form')
      store.setUserInfo({ ...form, fileList: fileList.value });
      router.push("/introduce");
    } catch (e) {
      console.log(e);
    }
  },
  onConfirm = ({ selectedValues }: PickerConfirmEventParams) => {
    form[columnsType.value] = selectedValues[0];
    showPicker.value = false;
  },
  onClick = (type) => {
    if (type == 'department') {
      if (form.zoneId) {
        for (let index = 0; index < ksDataList.value.length; index++) {
          if (form.zoneId == ksDataList.value[index].text) {
            store.setOptions(ksDataList.value[index].dataList)
            columnsValue.set("department", ksDataList.value[index].dataList);
          }
          
        }
        showPicker.value = true;
        columnsType.value = type;
      } else {
        showToast('请先选择所属单位');
      }
      
    } else {
      showPicker.value = true;
      columnsType.value = type;
    }
    console.log(type,'dd') 
    
  },
  handleConfirm = ({ selectedValues }) => {
    form[columnsType.value] = selectedValues.join("-");
    currentDate.value = ["1980", "01"];
    showPicker.value = false;
  };
</script>
<script lang="ts">
export default {
  name: "home",
};
</script>

<style lang="scss" scoped>
.container {
  background-color: #f9f9f9;
  height: 100%;
}
</style>
